<template>
    <div id="hot-app">
      <hot-table ref="hotTable" :settings="hotSettings"></hot-table>
      <el-button @click="upataData">更新数据</el-button>
    </div>
  </template>
    
    <script>
  import { HotTable } from "@handsontable/vue";
  
  export default {
    components: { HotTable },
    data() {
      return {
      //   tableData: [
        
      //   ],
        hotSettings: {
          data: [
          ["A1", "B1", "C1"],
          ["A2", "B2", "C2"],
          ],
          colHeaders: true,
          rowHeaders: true,
          height: "auto",
          licenseKey: "non-commercial-and-evaluation", // 免费授权
          // stretchH: "all", // 宽度自适应
          // afterChange: (changes) => {
          //   console.log("数据发生改变", changes);
          //   if (!changes) return;
          //   changes.forEach(([row, prop, oldVal, newVal]) => {
          //     this.$set(this.tableData[row], prop, newVal); // 保持Vue数据同步
          //   });
          // },
        },
      };
    },
    methods: {
      // 添加行
      addRow(newRowData) {
        const hot = this.$refs.hotTable.hotInstance;
  
        // API方式
        hot.alter("insert_row", hot.countRows());
        hot.setDataAtRow(hot.countRows() - 1, newRowData);
  
        // 同步到Vue数据（推荐）
        this.hotSettings.data.push(newRowData);
      },
  
      // 删除行
      deleteRow(row) {
        const hot = this.$refs.hotTable.hotInstance;
  
        hot.alter("remove_row", row);
        this.hotSettings.data.splice(row, 1);
      },
      // 更新单个单元格
      updateCell(row, col, value) {
        const hot = this.$refs.hotTable.hotInstance;
  
        // API方式更新
        hot.setDataAtCell(row, col, value);
  
        // 同步到Vue数据（可选）
        this.hotSettings.data[row][col] = value;
      },
  
      // 批量更新单元格
      batchUpdateCells(changes) {
        const hot = this.$refs.hotTable.hotInstance;
  
        changes.forEach(([row, col, value]) => {
          hot.setDataAtCell(row, col, value);
        });
      },
      // 更新整个表格的数据
      upataData() {
        let newData = [
          ["A3", "B3", "C3"],
          ["A4", "B4", "C4"],
        ];
  
        this.tableData = newData;
  
        //   const hot = this.$refs.hotTable.hotInstance;
  
        //   // 方法 1：直接修改配置数据（需触发响应式）
        //   this.$set(this.hotSettings, "data", newData);
        //   hot.render(); // 强制重新渲染
  
        //   // 方法 2：调用API（更可靠）
        //   hot.loadData(newData);
  
        // 方式 2：逐行更新（适合大数据量）
        //   newData.forEach((rowData, row) => {
        //     rowData.forEach((cellValue, col) => {
        //       hot.setDataAtCell(row, col, cellValue);
        //     });
        //   });
  
        // 强制刷新方法
        // hot.render();
        // hot.view.wt.wtOverlays.adjustElementsSize(true); // 处理滚动条异常
  
        // // 或者完全重新初始化
        // this.$nextTick(() => {
        //   this.hotSettings = { ...this.hotSettings }; // 触发重新渲染
        // });
      },
      // 动态列更新
      updateColumns(newColumns) {
        this.$set(this.hotSettings, "columns", newColumns);
        this.$nextTick(() => {
          this.$refs.hotTable.hotInstance.updateSettings({
            columns: newColumns,
          });
        });
      },
    },
  };
  </script>
    
    <style>
  .handsontable {
    margin: 20px;
  }
  </style>